<template>
    <div class="list">
        <header>
            <Button type="info" @click='addInterface'>
                <i class = "iconfont icon-add" style="font-size:14px;margin-right:5px"></i>
            </Button>
            <Input
                v-model.trim="searchKey"
                placeholder="请输入公司名称进行查询"
                style="width: 260px"
                clearable
            />
            <Button type="primary" icon="ios-search" @click="getTabList(1)">
            </Button>           
        </header>
        <div class='main'>
            <Table size="small" :columns="list" :data="data1" stripe></Table>
        </div>
        <div class="page">
            <Page :total="count" :current='pageNo' :page-size="pageSize" show-total show-elevator @on-change="loadPage"/>
        </div>
        <Modal
            v-model="ModalStatus"
            footer-hide
            width='500'
            :title="ModalTitle">
            <p style='word-break:break-all;'>{{ ModalContent }}</p>
        </Modal>           
    </div>
</template>
<script>
import api from "@/api/commonApi";
export default {
    data() {
        return {
            count: 10,
            pageNo: 1,
            pageSize: 10,
            list: [
                {
                    title: "排序",
                    key: "num",
                    align: "center",
                    width: 80,
                    render: (h, params) => {
                        let num = (this.pageNo-1)*this.pageSize + params.index +1;
                        return h("span", num);
                    }
                },
                {
                    title: "公司名称",
                    key: "company",
                    align: "center",
                },
                {
                    title: "用途",
                    key: "remark",
                    align: "center",
                },
                {
                    title: "aesKey",
                    key: "serviceAesKey",
                    align: "center",
                    render : (h,params) => {
                        let aes = params.row.serviceAesKey;
                        return h('div', [
                    　　　　[
                    　　　　h('a', {
                    　　　　　　style: {
                    　　　　　　　　display: 'inline-block',
                    　　　　　　　　width: params.column._width*0.8+'px',
                    　　　　　　　　overflow: 'hidden',
                    　　　　　　　　textOverflow: 'ellipsis',
                    　　　　　　　　whiteSpace: 'nowrap',
                    　　　　　　},
                                on: {
                                    click :() =>{
                                        this.showModal("查看aesKey",aes) 
                                    }
                                }
                    　　　　　　}, aes)
                    　　　　]
                    　　])
                    }
                },
                {
                    title: "token",
                    key: "serviceToken",
                    align: "center",
                    render:(h,params) => {
                        let serviceToken = params.row.serviceToken;
                        return h('div', [
                    　　　　[
                    　　　　h('a', {
                    　　　　　　style: {
                    　　　　　　　　display: 'inline-block',
                    　　　　　　　　width: params.column._width*0.8+'px',
                    　　　　　　　　overflow: 'hidden',
                    　　　　　　　　textOverflow: 'ellipsis',
                    　　　　　　　　whiteSpace: 'nowrap',
                    　　　　　　},
                                on: {
                                    click :() =>{
                                        this.showModal("查看token",serviceToken) 
                                    }
                                }                                
                    　　　　　　}, serviceToken)
                    　　　　]
                    　　])
                    }
                },
                {
                    title: "访问用户名",
                    key: "serviceName",
                    align: "center",
                },
                {
                    title: "设置",
                    align: "center",
                    width: 100,
                    render: (h,params) => {
                        let a = params.row.id
                        return h('div', [
                            h('a', {
                                on: {
                                    click: () => {
                                        this.editInterface(a)
                                    }
                                }
                            }, '编辑')
                        ])
                    }
                },
            ],
            data1: [],
            searchKey: "",
            // 弹窗相关
            ModalStatus: false,
            ModalTitle: "aesKey",
            ModalContent:""

        };
    },
    created() {
         let breadList = [
            { path: "/index", title: "首页" },
            {
                path: "/index/configuration/admin/user/list",
                title: "帐号权限配置"
            },
            {
                path: "/index/configuration/interfaceManagement/list",
                title: "接口管理"
            }
        ];
        this.$emit("changeBreadList", breadList);
    },
    mounted() {
        let pageNo = this.$route.query.pageNo;
        this.pageNo = Boolean(pageNo) ? pageNo : 1;
        this.getTabList(this.pageNo)
    },
    methods: {
        // 分页器改变
        loadPage (index) {
            this.pageNo = index;
            this.getTabList(index)
        },
        showModal(title, content) {
            this.ModalStatus =  true
            this.ModalTitle = title
            this.ModalContent = content
        },
        // 加载列表数据
        getTabList (pageNo) {
            this.pageNo = pageNo
            let url = api.findApiServiceList
            let params = {
                pageNo,
                pageSize: this.pageSize,
                searchKey: ''
            }
            this.searchKey == '' ? params.searchKey = null : params.searchKey = this.searchKey
            this.$axios.post(url, params).then(res => {
                if (res.data.success) {
                    let ret = res.data.object;
                    this.count = ret.total;
                    ret.records.forEach((item,index) => {
                        item.num = this.addZeros(index)
                    })
                    this.data1 = ret.records;
                } else {
                    this.$Message.info("加载列表数据失败")
                }
            })
        },
        // 跳转新增界面
        addInterface () {
            this.functionJS.queryNavgationTo(this, "/index/configuration/interfaceManagement/add", {
                pageNo: this.pageNo
            });
        },
        // 跳转至编辑
        editInterface(id) {
            let path = '/index/configuration/interfaceManagement/edit'
            let query = {
                pageNo: this.pageNo,
                id
            }
            this.functionJS.queryNavgationTo(this, path, query);
        }
    }
};
</script>
<style lang="less" scoped>
.list {
    width: 100%;
    padding: 10px;
    margin: 0 auto;
    background: #fff;
    header {
        margin: 10px 0;
    }
    .page {
        text-align: center;
        margin: 20px 0;
    }
}
</style>
